<template>
    <!-- 顶部轮播图 -->
    <el-carousel :interval="3000" type="card" autoplay>
        <div v-for="item in swiperImg" :key="item">
            <el-carousel-item>
                <img class="swiperImg" :src="getImageUrl(item.url)" @click="handleStudy(item.link)" alt="">
            </el-carousel-item>
        </div>
    </el-carousel>
    <!-- 顶部轮播图 -->
    <!-- 详情卡片 -->
    <div class="index-card">
        <div class="card-box">
            <div class="algorithm-card" v-for="(item, index) in cardList" :key="index"
                @click="goDetail(item.link, item.id)">
                <div class="card-cover">
                    <img class="cover" :src="getImageUrl(item.cardCover)" alt="">
                </div>
                <div class="card-detail">
                    <div class="detail-header">
                        <span class="algorithm-name">{{ item.algorithmName }}</span>
                        <div class="view-num">
                            <img class="icon" src="../../icons/view.svg" alt="">
                            <span class="text">{{ item.viewNum }}</span>
                        </div>
                    </div>
                    <p class="algorithm-digest">{{ item.algorithmDigest }}</p>
                </div>
            </div>
        </div>
        <div class="card-box">
            <div class="algorithm-card" v-for="(item, index) in cardList2" :key="index"
                @click="goDetail(item.link, item.id)">
                <div class="card-cover">
                    <img class="cover" :src="getImageUrl(item.cardCover)" alt="">
                </div>
                <div class="card-detail">
                    <div class="detail-header">
                        <span class="algorithm-name">{{ item.algorithmName }}</span>
                        <div class="view-num">
                            <img class="icon" src="../../icons/view.svg" alt="">
                            <span class="text">{{ item.viewNum }}</span>
                        </div>
                    </div>
                    <div class="algorithm-digest">{{ item.algorithmDigest }}</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 详情卡片 -->
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";

// 轮播图叔祖
const swiperImg = ref([
    {
        url: "N皇后/N皇后问题.jpg",
        link: "/study/n-queen-question",
    },
    {
        url: "swiper/hanoi轮播.jpg",
        link: "/study/recurhanoi",
    },
    {
        url: "swiper/轮播图1.png",
        link: "/study/search/binarysearch",
    },
    {
        url: "swiper/轮播图5.png",
        link: "/study/sort/mergersort",
    },
    {
        url: "swiper/轮播图2.png",
        link: "/study/graph/shortest-path/dijkstra",
    },
    {
        url: "swiper/轮播图6.png",
        link: "/study/sort/bubsort",
    },
])
// 跳转
const handleStudy = (link) => {
    router.push(link);
}

// 算法卡片集合
const cardList = ref([
    {
        id: 1,
        cardCover: "recur-hanoi/hanoi.jpg",
        algorithmName: "汉诺塔问题",
        algorithmDigest: "汉诺塔问题是一个经典的问题。汉诺塔（Hanoi Tower），又称河内塔，源于印度一个古老传说。",
        viewNum: "2K",
        link: "/study/recurhanoi",
    },
    {
        id: 2,
        cardCover: "N皇后/N皇后问题.jpg",
        algorithmName: "N皇后问题",
        algorithmDigest: "在n*n的方格棋盘上，放置n个皇后，要求每个皇后不同行、不同列、不同对角线。",
        viewNum: "3K",
        link: "/study/n-queen-question",
    },
    {
        id: 3,
        cardCover: "swiper/轮播图1.png",
        algorithmName: "二分查找",
        algorithmDigest: "有一天小明到图书馆借了 N 本书，出图书馆的时候，警报响了，于是保安把小明拦下，要检查一下哪本书没有登记出借。",
        viewNum: "4K",
        link: "/study/search/binarysearch",
    },
]);

const cardList2 = ref([
    {
        id: 4,
        cardCover: "swiper/轮播图2.png",
        algorithmName: "最短路径",
        algorithmDigest: "在图中，不可避免要解决的一个问题就是计算两点之间的最短路径，那么如何才能找出最短的那一条就是图中最短路径呢。",
        viewNum: "5K",
        link: "/study/graph/shortest-path/dijkstra",
    },
    {
        id: 5,
        cardCover: "swiper/轮播图6.png",
        algorithmName: "冒泡排序",
        algorithmDigest: '这个算法的名字由来是因为越小的元素会经由交换慢慢"浮"到数列的顶端，但是在广泛适用后，冒泡排序可以用来排任意顺序。',
        viewNum: "6K",
        link: "/study/sort/bubsort",
    },
    {
        id: 6,
        cardCover: "swiper/背包问题.jpg",
        algorithmName: "背包问题",
        algorithmDigest: '这里面最经典的是01背包问题，它基本上已经成为了事实上的动态规划入门级必学算法。',
        viewNum: "7K",
        link: "/study/dp/knapro",
    },
]);

onMounted(() => {
    getCardList();
})

// 初始化获取推荐算法数据
const getCardList = async () => {
    await axios.get(`/oasadapi/algorithms`).then((res) => {
        cardList.value = res.data.slice(0, 3);
        cardList2.value = res.data.slice(3, 6);
        // console.log(cardList.value, cardList2.value);
    })
}

// 加载图片
const getImageUrl = (url) => {
    // 里面可以根据需求写逻辑
    return new URL('../../assets/' + url, import.meta.url).href;
};

// 卡片点击事件
const router = useRouter();
const goDetail = (path, id) => {
    axios.post(`/oasadapi/algorithms/${id}`);
    router.push(path);
}

</script>

<style scoped lang="scss">
* {
    padding: 0;
    margin: 0;
}

.el-carousel__item {
    border-radius: 10px;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.swiperImg {
    width: 100%;
    height: 405px;

}

// 算法卡片
.index-card {
    display: flex;
    margin-top: 70px;
    background: url("../../assets/home/首页背景4.jpg");
    background-size: 100%;
    border-radius: 10px;
    padding-top: 12px;

    .card-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .algorithm-card {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 12px;
            margin-right: 12px;
            margin-bottom: 30px;
            border-radius: 10px;
            background: rgba(255, 255, 255, .4);
            padding: 5px;
            cursor: pointer;

            .cover {
                width: 100px;
                height: 70px;
                margin-right: 10px;
                border-radius: 10px;
            }

            .card-detail {
                display: flex;
                flex-direction: column;

                .detail-header {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 10px;

                    .algorithm-name {
                        font-size: 18px;
                    }

                    .view-num {
                        position: relative;

                        .text {
                            position: absolute;
                            top: 0;
                            right: 0;
                        }

                        .icon {
                            position: absolute;
                            top: -2px;
                            left: -65px;
                            width: 25px;
                            height: 25px;
                            margin-right: 5px;

                        }
                    }
                }

                .algorithm-digest {
                    color: #161616;
                }
            }

        }
    }
}
</style>
